<template>
    <div class="hot-goods">
        <div class="header">
            <span class="title">人气推荐</span>
            <span class="more" @click="gotomorehot">更多人气推荐 ></span>
        </div>

        <div class="goods-list">
            <div class="goods-item" v-for="goods in hotGoodsList" :key="goods.id" @click="goToGoodsDetail(goods.id)">
                <img :src="goods.picUrl" class="goods-img" :alt="goods.name">
                <div class="goods-details">
                    <div class="goods-name">{{ goods.name }}</div>
                    <div class="goods-brief">{{ goods.brief }}</div>
                    <div class="goods-prices">
                        <span class="current-price">¥{{ goods.retailPrice }}</span>
                        <span class="original-price">¥{{ goods.counterPrice }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getHomeData } from '@/api/home'
import { useRouter } from 'vue-router'
const router = useRouter()
const hotGoodsList = ref([])

onMounted(async () => {
    const response = await getHomeData()
    if (response.errno === 0 && response.data.hotGoodsList) {
        hotGoodsList.value = response.data.hotGoodsList
    }
});
const goToGoodsDetail = (id) => {
    router.push({
        path: '/goods/detail',
        query: { id }
    })
}
const gotomorehot = () => {
    router.push({
        path: '/goods/morehot',
    })
}
</script>

<style scoped>
.hot-goods {
    background: white;
    padding: 0 12px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f5f5f5;
}

.title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.more {
    font-size: 12px;
    color: #999;
}

.goods-list {
    display: flex;
    flex-direction: column;
}

.goods-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}

.goods-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 12px;
}

.goods-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.goods-name {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
}

.goods-brief {
    font-size: 12px;
    color: #999;
    line-height: 1.4;
    margin: 4px 0;
}

.goods-prices {
    margin-top: 8px;
}

.current-price {
    font-size: 16px;
    color: #ff2f55;
    font-weight: bold;
    margin-right: 8px;
}

.original-price {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
}
</style>